import { useNavigation } from '@react-navigation/native';
import React, { useEffect, useState } from 'react'
import { Dimensions, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

// 获取屏幕尺寸
const {width,height} = Dimensions.get('window');

export default function WelcomeScreen() {

  
  // 欢迎页图片资源（可以替换为自己的图片）
const WELCOME_IMAGES = [
  'https://picsum.photos/seed/welcome1/800/1200',
  'https://picsum.photos/seed/welcome2/800/1200',
  'https://picsum.photos/seed/welcome3/800/1200',
  // 'https://picsum.photos/seed/welcome4/800/1200',
];

const onPress = ()=>{

}
const [current,setCurrent] = useState(0)

const navigation = useNavigation()

useEffect(()=>{
  const timer = setInterval(()=>{
    setCurrent((current)=>{

       const next = current + 1;
      if(next > WELCOME_IMAGES.length -1){
        navigation.navigate('Index')
      }
      return current+1
    })    
  },2000)

  return ()=>{
    // 清除定时器
    clearInterval(timer)
  }
},[])

  return (
    <SafeAreaView  style={styles.container}>
      <Image
        style={{
          width:width,
          height:height,
          position: 'absolute',
        }}
        source={{
          uri: WELCOME_IMAGES[current],
        }}
      />
      {/* 跳过的button */}
      <TouchableOpacity
        style={styles.skipButton}
        onPress={onPress}
      >
        <Text>跳过</Text>
      </TouchableOpacity>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container:{
     flex: 1,
    width:width,
    height:height,
    // backgroundColor:'red'
  },
  skipButton:{
    position:'absolute',
    top:20,
    right:20,
    backgroundColor:'rgba(0,0,0,0.5)',
    padding:10,
    borderRadius:20
  }
})
